<template>
  <el-card class="product-card" shadow="hover">
    <div class="product-header">
      <h3>{{ product.name }}</h3>
      <el-dropdown>
        <el-button type="text">
          <Icon icon="ep:more" />
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="editProduct">编辑</el-dropdown-item>
            <el-dropdown-item @click="deleteProduct">删除</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    
    <div class="product-categories">
      <div class="category-item" @click="openCategory('presale')">
        <Icon icon="ep:document" />售前资料
      </div>
      <div class="category-item" @click="openCategory('acceptance')">
        <Icon icon="ep:check" />验收资料
      </div>
      <div class="category-item" @click="openCategory('technical')">
        <Icon icon="ep:cpu" />产品技术
      </div>
      <div class="category-item" @click="openCategory('other')">
        <Icon icon="ep:more-filled" />其他
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
defineOptions({ name: 'ProductCard' })

const props = defineProps<{
  product: {
    id: number
    name: string
    description: string
    manager: string
    version: string
  }
}>()

const emit = defineEmits(['edit', 'delete', 'openCategory'])

const editProduct = () => {
  emit('edit', props.product)
}

const deleteProduct = () => {
  emit('delete', props.product.id)
}

const openCategory = (category: string) => {
  emit('openCategory', props.product, category)
}
</script>

<style lang="scss" scoped>
.product-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    h3 {
      margin: 0;
      color: #303133;
    }
  }

  .product-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    .category-item {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      background: #f8f9fa;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #e9ecef;
        color: #409eff;
      }

      .el-icon {
        margin-right: 6px;
      }
    }
  }
}
</style>